<template>
  <div class="usercard">
    <div class="user-line"></div>
    <div class="user-self">
      <div>
        <el-icon>
          <User />
        </el-icon>
        <span style="margin-left: 8px" class="unselectable"> 个人中心 </span>
      </div>
      <el-icon @click="router.push('/personalCenter')">
        <ArrowRight />
      </el-icon>
    </div>
    <div class="user-info-div">
      <div class="user-info-row">
        <el-text class="user-info-label unselectable"> 用户名 </el-text>
        <el-text class="user-info-content">
          {{ user.baseInfo.username }}
        </el-text>
      </div>

      <div class="user-info-row">
        <el-text class="user-info-label unselectable"> 性别 </el-text>
        <el-text class="user-info-content">
          {{ user.baseInfo.sex }}
        </el-text>
      </div>

      <div class="user-info-row">
        <el-text class="user-info-label unselectable"> 电话 </el-text>
        <el-text class="user-info-content">
          {{ user.baseInfo.telephone }}
        </el-text>
      </div>
      <!-- <div class="user-info-row">
        <el-text class="user-info-label unselectable">
          职业
        </el-text>
        <el-text class="user-info-content">
          {{ user.baseInfo.career }}
        </el-text>
      </div>
      <div class="user-info-row">
        <el-text class="user-info-label unselectable">
          地址
        </el-text>
        <el-text class="user-info-content">
          {{ user.baseInfo.address }}
        </el-text>
      </div> -->
    </div>
    <!-- <div class="user-create">
      <div><el-icon>
          <EditPen />
        </el-icon><span style="margin-left: 8px;">我的创作</span></div>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </div>
    <div class="create-content">
      <div class="create-title">
        孤独症在中国：家庭与社会的“双向奔赴”
      </div>
      <div class="create-info">
        发布于 <span style="color: #d0cfcf;">2022-10-01</span>
      </div>
      <div class="user-thinline"></div>
      <div class="see-more">
        查看更多
      </div>
    </div> -->
    <div class="user-subscribe">
      <div>
        <el-icon>
          <Pointer />
        </el-icon>
        <span style="margin-left: 8px" class="unselectable">
          我订阅的栏目
        </span>
      </div>
      <el-icon @click="changeFold()" v-if="!cateFold">
        <ArrowRight />
      </el-icon>
      <el-icon @click="changeFold()" v-else>
        <ArrowDown />
      </el-icon>
    </div>
    <div class="no-subscribe" v-if="cateFold && !user.subscribe">
      你还没有订阅的栏目哦
    </div>

    <div
      class="subscribe-content"
      v-for="subscribe in user.subscribe"
      v-if="cateFold && user.subscribe"
    >
      <div class="content-row">
        <el-text class="row-name unselectable">
          {{ subscribe.name }}
        </el-text>

        <el-icon
          style="margin-left: 280px"
          @click="router.push('/cate/' + subscribe.id)"
        >
          <ArrowRight />
        </el-icon>
      </div>
    </div>

    <div class="user-favorite">
      <div>
        <el-icon>
          <Star />
        </el-icon>
        <span style="margin-left: 8px" class="unselectable">
          我的点赞稿件
        </span>
      </div>
      <el-icon @click="router.push('/myFavArticle')">
        <ArrowRight />
      </el-icon>
    </div>
    <!-- <div class="comment-content" v-for="comment in user.comments">
      <div class="comment-title">
        {{ comment.newsTitle }}
      </div>
      <div class="comment-time">
        <span style="color: #d0cfcf">{{ getTime(comment.createTime) }}</span>
      </div>
      <div class="comment-info">
        {{ comment.content.slice(0, 20) }}
      </div>
      <div class="user-thinline"></div>
      <div class="see-more" @click="router.push('/article/' + comment.newsId)">
        查看更多
      </div>
    </div> -->
    <!-- <div class="no-comment" v-if="user.comments.length === 0">暂无评论</div> -->
    <div class="logout" @click="onUserLogout">
      <el-icon>
        <SwitchButton />
      </el-icon>
      <span style="margin-left: 8px" class="unselectable"> 退出登录 </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userinfo } from '@/stores/counter';
import { inject, ref } from 'vue';
import { useRouter } from 'vue-router';
import convertTime from '@/api/convertTime';
import subscribeCate from '@/api/subscribeCate';
const user = userinfo();
const router = useRouter();
const { getTime } = convertTime();
const onUserLogout = inject('onUserLogout') as () => void;
const { getSubscribeList } = subscribeCate();
let cateFold = ref(false);
async function changeFold() {
  cateFold.value = !cateFold.value;
  await getSubscribeList();
}
</script>

<style scoped>
.subscribe-content {
  width: 80%;
  display: flex;
  flex-direction: column;
  padding-left: 28px;
  gap: 8px;
}
.row-name {
  width: 70px;
  font-size: 18px;
  color: #f5900a;
}

.no-subscribe {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #d0cfcf;
  font-size: 18px;
  text-align: center;
}

.usercard {
  width: 460px;
  height: fit-content;
  background-color: white;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  border-radius: 10px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.usercard > input {
  display: flex;
  width: calc(75%);
  margin: 10px;
  padding: 5px 10px;
  height: 30px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.usercard > input::placeholder {
  color: #bfbdbe;
}

.usercard > input:focus {
  outline: none;
  /* 可选，去除选中时的默认外边框 */
}

.user-line {
  margin-top: 100px;
  height: 3px;
  background-color: #f5900a;
  width: 80%;
}

.user-thinline {
  height: 2px;
  background-color: #f5900a;
  width: 100%;
  margin-top: 6px;
}

.user-subscribe,
.user-favorite,
.user-self,
.user-create,
.user-comment {
  display: flex;
  width: 75%;
  font-size: 24px;
  margin: 10px 0;
}

.create-content,
.comment-content {
  width: 75%;
  margin: 10px 0;
  margin-bottom: 30px;
}

.create-title,
.comment-title {
  font-size: 17px;
}

.create-info,
.comment-time {
  font-size: 12px;
  position: relative;
  margin-top: 6px;
}

.comment-info {
  font-size: 14px;
}

.see-more {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 12px;
  margin-top: 6px;
  color: #f6a043;
  cursor: pointer;
}

.user-subscribe > div,
.user-favorite > div,
.user-self > div,
.user-create > div,
.user-comment > div {
  flex: 1;
  display: relative;
  align-items: center;
  /* background-color: red; */
}

.logout {
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 20px;
  cursor: pointer;
}

.user-info-div {
  width: 80%;
  display: flex;
  flex-direction: column;
  padding-left: 28px;
  gap: 8px;
}

.user-info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.user-info-label {
  width: 70px;
  font-size: 18px;
  color: #f5900a;
}

.user-info-content {
  font-size: 18px;
  color: #000;
}
</style>
